<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <div id="app">
      <textarea v-model="obj.words"></textarea>
      <p>意大利语为: {{res}}</p>
  </div>

  <script src="./js/vue2.6.12.js"></script>
  <script src="./js/axios.js"></script>

  <script>
    // var xhr = new XMLHttpRequest()
    // xhr.send()
    // xhr.onreadyStateChange = function(res){
    //   if(res.code == 200){

    //   }
    // }
    // 异步
    // js  同步语言

    // 监听 数据 的 变化

    var app = new Vue({
      el:'#app',
      data:{
        obj:{
          words:''
        },
        res:'',
        // {"result":"nulla proident"}
      },
      methods:{
        
      },
      watch:{
        'obj.words' (newValue){
          console.log('值变化了' , newValue);
          // 拿着新值 做点什么事儿  --> 翻译现象(异步请求 ajax)  xhr
          // 模拟 翻译

          clearTimeout(this.timer)
          this.timer = setTimeout(async ()=>{
              var val = await axios({
              url:'https://apifoxmock.com/m1/3318905-0-default/translate',
              // methods:'get'
              params:{
                words:newValue
              }
            },500)
          console.log(val.data.result)
          this.res = val.data.result


          } , 500)

          
          

        }
      }
    })

    

  </script>
</body>
</html>